<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热门短剧分析仪表盘</title>
    <!-- 引入ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.14/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.14/lib/index.js"></script>
    <!-- 引入词云扩展 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@2.0.0/dist/echarts-wordcloud.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #fef5e7 0%, #fdf6ec 100%);
            color: #303133;
            line-height: 1.6;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            background: linear-gradient(90deg, #f6d365 0%, #ffffff 100%);
            color: #303133;
            padding: 30px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .header-left {
            flex: 1;
        }
        
        .header-right {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .header h1 {
            font-size: 28px;
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .header p {
            font-size: 16px;
            opacity: 0.9;
        }
        
        .header-right .filter-item {
            margin-bottom: 0;
        }
        
        .header-right label {
            color: rgba(48, 49, 51, 0.9);
        }
        
        .header-right select {
            background-color: rgba(255, 255, 255, 0.9);
            color: #303133;
            border: 1px solid #dcdfe6;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .header-right button {
            background-color: #fda085;
            color: #303133;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .header-right button:hover {
            background-color: #e6a23c;
            transform: translateY(-2px);
        }
        
        .filter-item {
            display: inline-flex;
            align-items: center;
        }
        
        .filter-item label {
            margin-right: 8px;
        }
        
        .filter-item select {
            padding: 4px 8px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .filter-item button {
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .chart-container {
            background: linear-gradient(135deg, #ffffff 0%, #fef9f3 100%);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            position: relative;
        }
        
        .chart-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
            color: #303133;
            border-left: 4px solid #667eea;
            padding-left: 12px;
        }
        
        .chart {
            width: 100%;
            height: 400px;
        }
        
        .chart-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .chart-col {
            flex: 1;
        }
        
        .chart-filter {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 10;
            background-color: rgba(255, 255, 255, 0.9);
            padding: 8px 12px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .chart-filter label {
            margin-right: 8px;
            color: #606266;
            font-size: 14px;
        }
        
        .chart-filter select {
            padding: 4px 8px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .pie-chart-overlay {
            position: absolute;
            top: 60px;
            right: 60px;
            width: 200px;
            height: 200px;
            z-index: 10;
        }
        
        @media (max-width: 768px) {
            .header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .header-right {
                margin-top: 15px;
                flex-wrap: wrap;
            }
            
            .chart-row {
                flex-direction: column;
            }
            
            .pie-chart-overlay {
                position: static;
                width: 100%;
                height: 200px;
                margin-top: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="header-left">
                <h1>热门短剧分析仪表盘</h1>
                <p>基于热门短剧榜单数据的多维度分析：平台分布、标签特点、内容类型、市场占比等</p>
            </div>
            <div class="header-right">
                <div class="filter-item">
                    <label for="rank-filter">榜单筛选：</label>
                    <select id="rank-filter">
                        <option value="daily">日榜</option>
                        <option value="weekly">周榜</option>
                        <option value="monthly">月榜</option>
                    </select>
                </div>
                <div class="filter-item">
                    <button id="refresh-btn">刷新数据</button>
                </div>
            </div>
        </div>
        
        <!-- 热门短剧榜单数据可视化分析板块 -->
        <div class="chart-container">
            <div class="chart-title">热门短剧榜单数据可视化分析</div>
            <div id="hot-drama-rank-chart" class="chart"></div>
        </div>
        
        <div class="chart-row">
            <!-- 热门短剧平台分布饼图 -->
            <div class="chart-col">
                <div class="chart-container">
                    <div class="chart-title">热门短剧平台分布</div>
                    <div id="hot-drama-platform-chart" class="chart"></div>
                </div>
            </div>
            
            <!-- 热门短剧标签分布柱状图 -->
            <div class="chart-col">
                <div class="chart-container">
                    <div class="chart-title">热门短剧标签分布</div>
                    <div id="hot-drama-tag-chart" class="chart"></div>
                </div>
            </div>
        </div>
        
        <div class="chart-row">
            <!-- 2. 热榜TOP100新剧集数分布折线图 -->
            <div class="chart-col">
                <div class="chart-container">
                    <div class="chart-title">热榜TOP100新剧集数分布</div>
                    <div id="episode-distribution-chart" class="chart"></div>
                </div>
            </div>
            
            <!-- 3. 内容类型受欢迎度分析 -->
            <div class="chart-col">
                <div class="chart-container">
                    <div class="chart-title">内容类型受欢迎度分析</div>
                    <div class="chart-filter">
                        <label for="content-holiday-filter">节假日筛选：</label>
                        <select id="content-holiday-filter">
                            <option value="weekday">非节假日</option>
                            <option value="holiday">节假日</option>
                        </select>
                    </div>
                    <div id="content-popularity-chart" class="chart"></div>
                    <div id="gender-ratio-chart" class="pie-chart-overlay"></div>
                </div>
            </div>
        </div>
        
        <div class="chart-row">
            <!-- 4. 不同标签短剧市场占比图 -->
            <div class="chart-col">
                <div class="chart-container">
                    <div class="chart-title">不同标签短剧市场占比</div>
                    <div id="tag-market-share-chart" class="chart"></div>
                </div>
            </div>
            
            <!-- 5. 平台表现分析 -->
            <div class="chart-col">
                <div class="chart-container">
                    <div class="chart-title">平台表现分析</div>
                    <div id="platform-performance-chart" class="chart"></div>
                </div>
            </div>
        </div>
        
        <div class="chart-row">
            <!-- 7. 平台与热门题材关系热力图 -->
            <div class="chart-col">
                <div class="chart-container">
                    <div class="chart-title">平台与热门题材关系热力图</div>
                    <div id="platform-genre-heatmap" class="chart"></div>
                </div>
            </div>
            
            <!-- 8. 题材标签词云图 -->
            <div class="chart-col">
                <div class="chart-container">
                    <div class="chart-title">题材标签词云图</div>
                    <div id="tag-wordcloud-chart" class="chart"></div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 全局变量存储热门短剧榜单数据
        let hotDramaData = {
            daily: [],
            weekly: [],
            monthly: []
        };
        
        // 加载CSV数据
        async function loadCSVData() {
            try {
                // 加载日榜数据
                const dailyResponse = await fetch('./csv/day.csv');
                const dailyText = await dailyResponse.text();
                hotDramaData.daily = parseCSVData(dailyText);
                
                // 加载周榜数据
                const weeklyResponse = await fetch('./csv/week.csv');
                const weeklyText = await weeklyResponse.text();
                hotDramaData.weekly = parseCSVData(weeklyText);
                
                // 加载月榜数据
                const monthlyResponse = await fetch('./csv/month.csv');
                const monthlyText = await monthlyResponse.text();
                hotDramaData.monthly = parseCSVData(monthlyText);
                
                console.log('热门短剧榜单数据加载完成');
            } catch (error) {
                console.error('加载CSV数据失败:', error);
            }
        }
        
        // 解析CSV数据
        function parseCSVData(csvText) {
            const lines = csvText.split('\n').filter(line => line.trim());
            const headers = lines[0].split(',');
            const data = [];
            
            for (let i = 1; i < lines.length; i++) {
                const values = lines[i].split(',');
                if (values.length >= headers.length) {
                    const item = {};
                    headers.forEach((header, index) => {
                        item[header.trim()] = values[index] ? values[index].trim() : '';
                    });
                    data.push(item);
                }
            }
            
            return data;
        }
        
        // 模拟数据生成函数
        function generateMockData() {
            // 生成日期数组
            const dates = [];
            const now = new Date();
            for (let i = 90; i >= 0; i--) {
                const date = new Date(now);
                date.setDate(date.getDate() - i);
                dates.push(date.toISOString().split('T')[0]);
            }
            
            // 生成各类别短剧的热度数据 - 根据需求：情感、都市、逆袭是传统三强，宫斗宅斗、种田经营、女强等新兴标签热度飙升
            // 热榜TOP100新剧集数分布数据
            const episodeDistributionData = [
                { name: '40集以下', value: 8 },
                { name: '40-59', value: 12 },
                { name: '60-79', value: 44 },
                { name: '80-100', value: 42 },
                { name: '100集以上', value: 10 }
            ];
            
            // 内容类型受欢迎度数据 - 节假日和非节假日
            const contentPopularityData = {
                weekday: [
                    { name: '逆袭', value: 38 },
                    { name: '都市', value: 35 },
                    { name: '情感', value: 32 },
                    { name: '女强', value: 22 },
                    { name: '宫斗宅斗', value: 18 },
                    { name: '种田经营', value: 15 }
                ],
                holiday: [
                    { name: '都市', value: 40 },
                    { name: '女强', value: 35 },
                    { name: '种田经营', value: 30 },
                    { name: '情感', value: 28 },
                    { name: '逆袭', value: 25 },
                    { name: '萌宝', value: 22 },
                    { name: '家庭伦理', value: 18 }
                ]
            };
            
            // 男频女频占比数据
            const genderRatioData = [
                { name: '女频', value: 40.29, unit: '亿' },
                { name: '男频', value: 16.85, unit: '亿' }
            ];
            
            // 不同标签短剧市场占比数据
            const tagMarketShareData = [
                { name: '情感', value: 22 },
                { name: '都市', value: 20 },
                { name: '逆袭', value: 18 },
                { name: '古装', value: 15 },
                { name: '宫斗宅斗', value: 10 },
                { name: '女强', value: 8 },
                { name: '种田经营', value: 7 }
            ];
            
            // 平台表现数据 - 从Markdown文件中提取的真实数据
            const platformData = {
                daily: [
                    { name: '河马', count: 8, heat: 1102.5 },
                    { name: '番茄', count: 6, heat: 668.3 },
                    { name: '快创', count: 2, heat: 277.3 },
                    { name: '花生', count: 2, heat: 207.3 },
                    { name: '麦芽', count: 2, heat: 166.4 },
                    { name: '山海', count: 3, heat: 214.9 },
                    { name: '七猫', count: 2, heat: 170.9 },
                    { name: '九州', count: 2, heat: 112.5 },
                    { name: '其他', count: 3, heat: 169.4 }
                ],
                weekly: [
                    { name: '河马', count: 5, heat: 3679.2 },
                    { name: '番茄', count: 4, heat: 1461.8 },
                    { name: '麦芽', count: 2, heat: 1483.7 },
                    { name: '花生', count: 3, heat: 1187.8 },
                    { name: '九州', count: 3, heat: 1128 },
                    { name: '快创', count: 1, heat: 252.9 },
                    { name: '掌阅', count: 1, heat: 342.4 },
                    { name: '其他', count: 9, heat: 3639.3 }
                ],
                monthly: [
                    { name: '河马', count: 8, heat: 12309.6 },
                    { name: '番茄', count: 8, heat: 7727.9 },
                    { name: '快创', count: 4, heat: 6548.3 },
                    { name: '麦芽', count: 3, heat: 4884.9 },
                    { name: '山海', count: 1, heat: 1318.5 },
                    { name: '九州', count: 2, heat: 1890.9 },
                    { name: '花生', count: 1, heat: 879.4 },
                    { name: '其他', count: 3, heat: 4094.7 }
                ]
            };
            
            // 平台与热门题材关系热力图数据 - 使用真实数据
            const platformGenreData = [
                ['河马', '现代言情', 9.2],
                ['河马', '都市日常', 8.8],
                ['河马', '逆袭', 7.5],
                ['河马', '古装', 5.2],
                ['河马', '女强', 4.8],
                ['番茄', '现代言情', 7.8],
                ['番茄', '都市日常', 8.5],
                ['番茄', '逆袭', 8.0],
                ['番茄', '古装', 6.5],
                ['番茄', '女强', 7.2],
                ['快创', '现代言情', 6.5],
                ['快创', '都市日常', 6.2],
                ['快创', '逆袭', 8.8],
                ['快创', '古装', 7.5],
                ['快创', '女强', 5.8],
                ['花生', '现代言情', 5.2],
                ['花生', '都市日常', 6.8],
                ['花生', '逆袭', 5.5],
                ['花生', '古装', 4.8],
                ['花生', '女强', 5.2],
                ['麦芽', '现代言情', 7.5],
                ['麦芽', '都市日常', 6.8],
                ['麦芽', '逆袭', 7.2],
                ['麦芽', '古装', 6.5],
                ['麦芽', '女强', 5.8]
            ];
            
            // 标签词云数据 - 使用真实数据
            const wordcloudData = [
                { name: '逆袭', value: 850 },
                { name: '都市日常', value: 780 },
                { name: '现代言情', value: 720 },
                { name: '虐恋', value: 650 },
                { name: '古装', value: 620 },
                { name: '家庭伦理', value: 580 },
                { name: '职场', value: 550 },
                { name: '甜宠', value: 520 },
                { name: '女强', value: 500 },
                { name: '重生', value: 480 },
                { name: '穿越', value: 460 },
                { name: '打脸虐渣', value: 450 },
                { name: '悬疑推理', value: 420 },
                { name: '宫斗宅斗', value: 400 },
                { name: '种田经营', value: 380 },
                { name: '奇幻爱情', value: 350 },
                { name: '年代', value: 320 },
                { name: '亲情', value: 300 },
                { name: '校园', value: 280 },
                { name: '萌宝', value: 260 }
            ];
            
            return {
                dates,
                episodeDistributionData,
                contentPopularityData,
                genderRatioData,
                tagMarketShareData,
                platformData,
                platformGenreData,
                wordcloudData
            };
        }
        
        // 生成趋势数据的辅助函数 - 支持趋势方向和增长率，确保斜率自然不同
        function generateTrendData(dates, min, max, volatility, hasUpwardTrend, growthRate) {
            const data = [];
            // 设置初始值，基于最小值但加上一些随机性
            let current = min + Math.random() * (max - min) * 0.3;
            
            dates.forEach((date, index) => {
                // 基础随机波动
                const randomChange = (Math.random() - 0.5) * volatility * current;
                
                // 添加趋势增长（如果有）
                let trendChange = 0;
                if (hasUpwardTrend) {
                    // 增长率随时间变化，让斜率更自然
                    const progress = index / dates.length;
                    // 使用非线性增长，让趋势更自然
                    const dynamicGrowthRate = growthRate * (1 + Math.sin(progress * Math.PI) * 0.3 + (Math.random() - 0.5) * 0.2);
                    // 添加一些周期性波动
                    const seasonalEffect = Math.sin(progress * Math.PI * 2) * current * 0.02;
                    trendChange = current * dynamicGrowthRate + seasonalEffect;
                }
                
                // 特殊事件影响（偶尔的大波动）
                let specialEvent = 0;
                if (Math.random() < 0.03) { // 3%概率发生特殊事件
                    specialEvent = current * (Math.random() - 0.5) * 0.15;
                }
                
                // 综合所有变化
                current += randomChange + trendChange + specialEvent;
                
                // 确保在范围内
                current = Math.max(min, Math.min(max, current));
                
                data.push(Math.round(current));
            });
            
            return data;
        }
        
        // 2. 创建热榜TOP100新剧集数分布折线图
        function createEpisodeDistributionChart() {
            const mockData = generateMockData();
            const chartDom = document.getElementById('episode-distribution-chart');
            const myChart = echarts.init(chartDom);
            
            const option = {
                title: {
                    text: '热榜TOP100新剧集数分布',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}: {c}%'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: mockData.episodeDistributionData.map(item => item.name),
                    axisLabel: {
                        interval: 0
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '占比 (%)',
                    axisLabel: {
                        formatter: '{value}%'
                    }
                },
                series: [{
                    type: 'line',
                    data: mockData.episodeDistributionData.map(item => item.value),
                    smooth: true,
                    lineStyle: {
                        width: 4,
                        color: '#5470c6'
                    },
                    itemStyle: {
                        color: '#5470c6',
                        borderWidth: 2,
                        borderColor: '#fff'
                    },
                    symbol: 'circle',
                    symbolSize: 10,
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(84, 112, 198, 0.6)' },
                            { offset: 1, color: 'rgba(84, 112, 198, 0.1)' }
                        ])
                    }
                }]
            };
            
            option && myChart.setOption(option);
            
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        }
        
        // 3. 创建内容类型受欢迎度分析图（条形图）
        function createContentPopularityChart() {
            const mockData = generateMockData();
            const chartDom = document.getElementById('content-popularity-chart');
            const myChart = echarts.init(chartDom);
            
            // 获取当前节假日筛选状态
            const holidayFilter = document.getElementById('content-holiday-filter').value;
            const data = holidayFilter === 'holiday' ? 
                mockData.contentPopularityData.holiday : 
                mockData.contentPopularityData.weekday;
            
            const option = {
                title: {
                    text: holidayFilter === 'holiday' ? '节假日内容类型受欢迎度' : '非节假日内容类型受欢迎度',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: '{b}: {c}'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    name: '热力值'
                },
                yAxis: {
                    type: 'category',
                    data: data.map(item => item.name),
                    axisLabel: {
                        interval: 0
                    }
                },
                series: [{
                    type: 'bar',
                    data: data.map(item => item.value),
                    itemStyle: {
                        color: function(params) {
                            // 根据类别设置不同颜色
                            const colors = [
                                '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de',
                                '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'
                            ];
                            return colors[params.dataIndex % colors.length];
                        }
                    }
                }]
            };
            
            option && myChart.setOption(option);
            
            // 同时创建男频女频占比环形图
            createGenderRatioChart();
            
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        }
        
        // 创建男频女频占比环形图
        function createGenderRatioChart() {
            const mockData = generateMockData();
            const chartDom = document.getElementById('gender-ratio-chart');
            const myChart = echarts.init(chartDom);
            
            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c}{d}'
                },
                series: [{
                    type: 'pie',
                    radius: ['30%', '60%'],
                    center: ['50%', '50%'],
                    data: mockData.genderRatioData.map(item => ({
                        name: item.name,
                        value: item.value
                    })),
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: true,
                        position: 'outside',
                        formatter: '{b}: {c}{d}%',
                        fontSize: 12,
                        fontWeight: 'bold'
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };
            
            option && myChart.setOption(option);
            
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        }
        
        // 4. 创建不同标签短剧市场占比图
        function createTagMarketShareChart() {
            const mockData = generateMockData();
            const chartDom = document.getElementById('tag-market-share-chart');
            const myChart = echarts.init(chartDom);
            
            const option = {
                title: {
                    text: '不同标签短剧市场占比',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c}%'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    top: 'middle'
                },
                series: [{
                    name: '市场占比',
                    type: 'pie',
                    radius: '60%',
                    center: ['60%', '50%'],
                    data: mockData.tagMarketShareData,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: true,
                        formatter: '{b}\n{d}%'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '18',
                            fontWeight: 'bold'
                        }
                    }
                }]
            };
            
            option && myChart.setOption(option);
            
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        }
        
        // 5. 创建平台表现分析图表
        function createPlatformPerformanceChart() {
            const mockData = generateMockData();
            const chartDom = document.getElementById('platform-performance-chart');
            const myChart = echarts.init(chartDom);
            
            // 获取当前榜单筛选状态
            const rankFilter = document.getElementById('rank-filter').value;
            const data = mockData.platformData[rankFilter];
            
            const option = {
                title: {
                    text: `平台${rankFilter === 'daily' ? '日榜' : rankFilter === 'weekly' ? '周榜' : '月榜'}表现分析`,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data: ['作品数量', '热力值'],
                    bottom: 0
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: data.map(item => item.name),
                    axisLabel: {
                        interval: 0,
                        rotate: 30
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '作品数量',
                        position: 'left'
                    },
                    {
                        type: 'value',
                        name: '热力值',
                        position: 'right'
                    }
                ],
                series: [
                    {
                        name: '作品数量',
                        type: 'bar',
                        data: data.map(item => item.count),
                        itemStyle: {
                            color: '#5470c6'
                        }
                    },
                    {
                        name: '热力值',
                        type: 'line',
                        yAxisIndex: 1,
                        data: data.map(item => item.heat),
                        smooth: true,
                        lineStyle: {
                            width: 3
                        },
                        itemStyle: {
                            color: '#ee6666'
                        }
                    }
                ]
            };
            
            option && myChart.setOption(option);
            
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        }
        
        // 6. 创建平台与热门题材关系热力图
        function createPlatformGenreHeatmap() {
            const mockData = generateMockData();
            const chartDom = document.getElementById('platform-genre-heatmap');
            const myChart = echarts.init(chartDom);
            
            // 提取平台和题材名称
            const platforms = [...new Set(mockData.platformGenreData.map(item => item[0]))];
            const genres = [...new Set(mockData.platformGenreData.map(item => item[1]))];
            
            // 创建热力图数据
            const heatmapData = [];
            platforms.forEach((platform, i) => {
                genres.forEach((genre, j) => {
                    const item = mockData.platformGenreData.find(d => d[0] === platform && d[1] === genre);
                    heatmapData.push([j, i, item ? item[2] : 0]);
                });
            });

            const option = {
                title: {
                    text: '平台与热门题材关系热力图',
                    left: 'center'
                },
                tooltip: {
                    position: 'top',
                    formatter: function(params) {
                        return `${platforms[params.data[1]]} - ${genres[params.data[0]]}<br/>关联度: ${params.data[2]}`;
                    }
                },
                grid: {
                    height: '70%',
                    top: '15%',
                    left: '10%',
                    right: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: genres,
                    splitArea: {
                        show: true
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 45
                    }
                },
                yAxis: {
                    type: 'category',
                    data: platforms,
                    splitArea: {
                        show: true
                    }
                },
                visualMap: {
                    min: 0,
                    max: 10,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '0%',
                    inRange: {
                        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                    }
                },
                series: [{
                    name: '关联度',
                    type: 'heatmap',
                    data: heatmapData,
                    label: {
                        show: true,
                        formatter: function(params) {
                            return params.data[2].toFixed(1);
                        }
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };
            
            option && myChart.setOption(option);
            
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        }
        
        // 7. 创建题材标签词云图
        function createTagWordcloudChart() {
            const mockData = generateMockData();
            const chartDom = document.getElementById('tag-wordcloud-chart');
            const myChart = echarts.init(chartDom);
            
            const option = {
                title: {
                    text: '热门题材标签词云',
                    left: 'center'
                },
                tooltip: {
                    show: true,
                    formatter: function(params) {
                        return `${params.name}: ${params.value}`;
                    }
                },
                series: [{
                    type: 'wordCloud',
                    shape: 'circle',
                    left: 'center',
                    top: 'center',
                    width: '90%',
                    height: '90%',
                    right: null,
                    bottom: null,
                    sizeRange: [20, 80],
                    rotationRange: [-45, 90],
                    rotationStep: 45,
                    gridSize: 12,
                    drawOutOfBound: false,
                    textStyle: {
                        fontFamily: 'Microsoft YaHei, Arial, sans-serif',
                        fontWeight: 'bold',
                        color: function () {
                            const colors = [
                                '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de',
                                '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'
                            ];
                            return colors[Math.floor(Math.random() * colors.length)];
                        }
                    },
                    emphasis: {
                        focus: 'self',
                        textStyle: {
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    data: mockData.wordcloudData
                }]
            };
            
            option && myChart.setOption(option);
            
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        }
        
        // 8. 创建热门短剧榜单数据可视化分析图表
        function createHotDramaRankChart() {
            const rankType = document.getElementById('rank-filter').value;
            const data = hotDramaData[rankType];
            
            if (!data || data.length === 0) {
                console.error('没有热门短剧榜单数据');
                return;
            }
            
            // 取前10名数据
            const top10Data = data.slice(0, 10);
            
            // 提取剧名和热力值
            const dramaNames = top10Data.map(item => item['剧名'] || item['剧名']);
            const heatValues = top10Data.map(item => {
                const heatStr = item['热力值'] || '0';
                // 处理热力值，如"262.7w"转换为262.7
                return parseFloat(heatStr.replace('w', ''));
            });
            
            const chartDom = document.getElementById('hot-drama-rank-chart');
            const myChart = echarts.init(chartDom);
            
            const option = {
                title: {
                    text: `热门短剧TOP10 (${rankType === 'daily' ? '日榜' : rankType === 'weekly' ? '周榜' : '月榜'})`,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function(params) {
                        const data = params[0];
                        return `${data.name}<br/>热力值: ${data.value}w`;
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    name: '热力值(w)',
                    nameTextStyle: {
                        color: '#666'
                    }
                },
                yAxis: {
                    type: 'category',
                    data: dramaNames,
                    axisLabel: {
                        interval: 0,
                        rotate: 30
                    }
                },
                series: [
                    {
                        name: '热力值',
                        type: 'bar',
                        data: heatValues,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: 0, color: '#f6d365' },
                                { offset: 0.7, color: '#fda085' },
                                { offset: 1, color: '#e6a23c' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: '#f9e79f' },
                                    { offset: 0.7, color: '#fadbd8' },
                                    { offset: 1, color: '#f8c471' }
                                ])
                            }
                        }
                    }
                ]
            };
            
            option && myChart.setOption(option);
            
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        }
        
        // 9. 创建热门短剧平台分布饼图
        function createHotDramaPlatformChart() {
            const rankType = document.getElementById('rank-filter').value;
            const data = hotDramaData[rankType];
            
            if (!data || data.length === 0) {
                console.error('没有热门短剧榜单数据');
                return;
            }
            
            // 统计平台分布
            const platformCount = {};
            data.forEach(item => {
                const platform = item['平台方'] || '未知';
                if (platformCount[platform]) {
                    platformCount[platform]++;
                } else {
                    platformCount[platform] = 1;
                }
            });
            
            // 转换为ECharts数据格式
            const platformData = Object.keys(platformCount).map(platform => ({
                name: platform,
                value: platformCount[platform]
            }));
            
            // 按数量排序
            platformData.sort((a, b) => b.value - a.value);
            
            const chartDom = document.getElementById('hot-drama-platform-chart');
            const myChart = echarts.init(chartDom);
            
            const option = {
                title: {
                    text: `热门短剧平台分布 (${rankType === 'daily' ? '日榜' : rankType === 'weekly' ? '周榜' : '月榜'})`,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    top: 'center'
                },
                series: [
                    {
                        name: '平台分布',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: platformData
                    }
                ]
            };
            
            option && myChart.setOption(option);
            
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        }
        
        // 10. 创建热门短剧标签分布柱状图
        function createHotDramaTagChart() {
            const rankType = document.getElementById('rank-filter').value;
            const data = hotDramaData[rankType];
            
            if (!data || data.length === 0) {
                console.error('没有热门短剧榜单数据');
                return;
            }
            
            // 统计标签分布
            const tagCount = {};
            data.forEach(item => {
                const tags = item['标签/题材'] || '';
                const tagArray = tags.split('/');
                tagArray.forEach(tag => {
                    const trimmedTag = tag.trim();
                    if (trimmedTag) {
                        if (tagCount[trimmedTag]) {
                            tagCount[trimmedTag]++;
                        } else {
                            tagCount[trimmedTag] = 1;
                        }
                    }
                });
            });
            
            // 转换为数组并排序
            const tagData = Object.keys(tagCount).map(tag => ({
                name: tag,
                value: tagCount[tag]
            }));
            
            // 取前15个标签
            tagData.sort((a, b) => b.value - a.value);
            const top15Tags = tagData.slice(0, 15);
            
            const chartDom = document.getElementById('hot-drama-tag-chart');
            const myChart = echarts.init(chartDom);
            
            const option = {
                title: {
                    text: `热门短剧标签TOP15 (${rankType === 'daily' ? '日榜' : rankType === 'weekly' ? '周榜' : '月榜'})`,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: top15Tags.map(item => item.name),
                    axisLabel: {
                        interval: 0,
                        rotate: 45
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '出现次数',
                    nameTextStyle: {
                        color: '#666'
                    }
                },
                series: [
                    {
                        name: '出现次数',
                        type: 'bar',
                        data: top15Tags.map(item => item.value),
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#ff8888' },
                                { offset: 0.5, color: '#ff5555' },
                                { offset: 1, color: '#cc2222' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#ff6666' },
                                    { offset: 0.7, color: '#ff3333' },
                                    { offset: 1, color: '#cc0000' }
                                ])
                            }
                        }
                    }
                ]
            };
            
            option && myChart.setOption(option);
            
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        }
        
        // 初始化所有图表
        function initCharts() {
            createEpisodeDistributionChart();
            createContentPopularityChart();
            createTagMarketShareChart();
            createPlatformPerformanceChart();
            createPlatformGenreHeatmap();
            createTagWordcloudChart();
            
            // 初始化热门短剧榜单相关图表
            if (hotDramaData.daily.length > 0 || hotDramaData.weekly.length > 0 || hotDramaData.monthly.length > 0) {
                createHotDramaRankChart();
                createHotDramaPlatformChart();
                createHotDramaTagChart();
            }
        }
        
        // 主初始化函数
        document.addEventListener('DOMContentLoaded', function() {
            // 先加载CSV数据，再初始化图表
            loadCSVData().then(() => {
                initCharts();
            }).catch(error => {
                console.error('初始化失败:', error);
                // 如果CSV加载失败，仍然初始化原有图表
                initCharts();
            });
            
            // 刷新按钮事件
            document.getElementById('refresh-btn').addEventListener('click', function() {
                // 重新加载CSV数据并刷新图表
                loadCSVData().then(() => {
                    initCharts();
                    alert('数据已刷新');
                }).catch(error => {
                    console.error('刷新数据失败:', error);
                    alert('刷新数据失败，请检查网络连接');
                });
            });
            
            // 节假日筛选器变化事件
            document.getElementById('content-holiday-filter').addEventListener('change', function() {
                createContentPopularityChart();
            });
            
            // 榜单筛选器变化事件
            document.getElementById('rank-filter').addEventListener('change', function() {
                // 更新热门短剧榜单相关图表
                if (hotDramaData.daily.length > 0 || hotDramaData.weekly.length > 0 || hotDramaData.monthly.length > 0) {
                    createHotDramaRankChart();
                    createHotDramaPlatformChart();
                    createHotDramaTagChart();
                }
            });
        });
    </script>
</body>
</html>